import * as React from "react"
import { View, ViewStyle, ImageStyle, TextStyle } from "react-native"
import { Text } from "../text"
import { Icon } from "../icon"
import { spacing } from "../../theme"

const bulletItemStyle: ViewStyle = {
  flexDirection: "row",
  marginTop: spacing[4],
  paddingBottom: spacing[4],
  borderBottomWidth: 1,
  borderBottomColor: "#3A3048"
}
const bulletContainerStyle: ViewStyle = {
  marginRight: spacing[4] - 1,
  marginTop: spacing[2]
}
const bulletStyle: ImageStyle = {
  width: 8,
  height: 8
}
const bulletTextStyle: TextStyle = {
  flex: 1,
  fontFamily: "Montserrat-Regular",
  color: "#BAB6C8",
  fontSize: 15,
  lineHeight: 22
}

export interface BulletItemProps {
  text: string
}

export function BulletItem(props: BulletItemProps) {
  return (
    <View style={bulletItemStyle}>
      <Icon icon="bullet" containerStyle={bulletContainerStyle} style={bulletStyle} />
      <Text style={bulletTextStyle} text={props.text} />
    </View>
  )
}
